<template>
  <div class="wx-video">
    <!-- 控制区 -->
    <div class="operation">
      <el-button type="primary" @click="createRoom">加入房间</el-button>
      <el-button type="danger" @click="leaveRoom">退出房间</el-button>
      <span>用户名：{{ userId }}</span>
      <span>房间号：</span>
      <el-input v-model="roomId" placeholder="请输入内容"></el-input>
      <span>群号：</span>
      <el-input v-model="timGroupID" placeholder="请输入内容"></el-input>
    </div>

    <!-- 视频区 -->
    <div id="trtc-video">
      <div id="my-video"></div>
      <div class="you-video1"></div>
      <div class="you-video2"></div>
    </div>
    <!-- 聊天区 -->
    <div id="chatting" class="chatting">
      <div class="chatting-header">大家一起来聊天</div>
      <div class="chatting-content">
        <div
          :class="item.source === 1 ? 'myMessage-box' : 'yourMessage-box'"
          v-for="item of messageList"
          :key="item.id"
        >
          <text-message
            v-if="item.messageType === 'text'"
            :source="item.source"
            :userName="item.userName"
            :message="item.message"
          />
          <img-message
            v-if="item.messageType === 'img'"
            :source="item.source"
            :userName="item.userName"
            :message="item.message"
          />
        </div>
      </div>
      <div class="message-content">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="messageContent"
        >
        </el-input>
      </div>
      <div class="chatting-operation">
        <el-button type="primary" size="mini" @click="sendText">
          发送
        </el-button>
        <input type="file" ref="sendFile" @change="sendFile" />
      </div>
    </div>
    <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="800px">
      <div id="trtc-video">
        <div id="my-video"></div>
        <div class="you-video1"></div>
        <div class="you-video2"></div>
      </div>
    </el-dialog> -->
  </div>
</template>


<script>
import TrtcVideoCall from "@/utils/trtc-calling/index";
import { getUserId, getRoomId } from "@/utils/trtc-calling/utils/index";
import TextMessage from "@/components/Home/TextMessage";
import ImgMessage from "@/components/Home/ImgMessage";

export default {
  components: {
    TextMessage,
    ImgMessage,
  },
  data() {
    return {
      userId: "",
      roomId: "",
      trtcVideoCall: null,
      dialogVisible: false,
      messageContent: "good good study, day day up",
      messageList: [],
      timGroupID: "",
    };
  },
  methods: {
    createRoom() {
      // this.dialogVisible = true;
      this.trtcVideoCall = new TrtcVideoCall({
        userId: this.userId,
        roomId: Number(this.roomId),
        myVideo: "my-video",
        yourVideo1: "you-video1",
        yourVideo2: "you-video2",
        chatting: "chatting",
        getAccept: this.getAccept,
        timGroupID: this.timGroupID,
        getTimGroupID: this.getTimGroupID,
      });
    },
    sendText() {
      this.sendMessage("text", this.messageContent);
    },
    async sendMessage(type, content) {
      const params = { type, content };
      const res = await this.trtcVideoCall.timCreateTextMessage(params);
      if (res.status) {
        this.messageListAdd(
          this.userId,
          1,
          type,
          content
        );
      }
    },
    getAccept({ userName, message, type }) {
      this.messageListAdd(userName, 2, type, message);
    },
    getTimGroupID(timGroupID) {
      this.timGroupID = timGroupID;
    },
    messageListAdd(userName, source, type, message) {
      const sendObj = {
        id: this.messageList.length,
        userName: userName,
        source: source,
        messageType: type,
        message: message,
      };
      this.messageList.push(sendObj);
    },
    leaveRoom() {
      this.trtcVideoCall && this.trtcVideoCall.leave();
    },
    sendFile() {
      // this.trtcVideoCall.timGetGroupList();
      const sendFile = this.$refs["sendFile"];
      this.trtcVideoCall.timUpLoadFile(sendFile, this.getFileUrl);
    },
    getFileUrl(url) {
      // this.messageListAdd(this.userId, 1, "img", url);
      this.sendMessage("img", url);
    },
  },
  mounted() {
    this.userId = getUserId();
    this.roomId = getRoomId();
  },
};
</script>
<style lang="scss" scoped>
.wx-video {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.operation {
  display: flex;
  align-items: center;
  width: 800px;
  .el-input {
    width: 300px;
  }
}
#trtc-video {
  position: relative;
  display: flex;
  width: 350px;
  height: 500px;
  #my-video {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;
    width: 70px;
    height: 100px;
    background: red;
    /deep/ video {
      position: inherit !important;
      object-fit: contain;
    }
  }
  .you-video1 {
    width: 100%;
    height: 100%;
    background: yellow;
    /deep/ video {
      width: auto !important;
      position: inherit !important;
      transform: translate(-25%) rotateY(180deg) !important;
      object-fit: contain;
    }
  }
  .you-video2 {
    position: absolute;
    top: 100px;
    right: 0px;
    width: 70px;
    height: 100px;
    background: green;
    /deep/ video {
      width: auto !important;
      position: inherit !important;
      transform: translate(-25%) rotateY(180deg) !important;
      object-fit: contain;
    }
  }
}

.chatting {
  position: absolute;
  right: 0px;
  width: 300px;
  height: 600px;
  border: 1px solid #3686ff;
  border-radius: 4px;
  .chatting-header {
    width: 100%;
    height: 40px;
    background: #3686ff;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }
  .chatting-content {
    width: 100%;
    height: calc(100% - 220px);
    overflow-y: scroll;
    .myMessage-box {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin: 10px 0;
    }

    .yourMessage-box {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      margin: 10px 0;
    }
  }
  .message-content {
    width: 100%;
    height: 100px;
    .el-textarea,
    .el-textarea__inner {
      height: 100%;
    }
  }
  .chatting-operation {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    border-top: 1px solid #3686ff;
  }
}
</style>
